import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import Link from 'umi/link';
import { Row, Col, Card, Button, Form, message, Input, Select } from 'antd';
import Login from '@/components/Login';
import styles from './Login.less';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
    username: 'user',
  };

  onTabChange = type => {
    this.setState({ type });
  };

  onGetCaptcha = () =>
    new Promise((resolve, reject) => {
      this.loginForm.validateFields(['mobile'], {}, (err, values) => {
        if (err) {
          reject(err);
        } else {
          const { dispatch } = this.props;
          dispatch({
            type: 'login/getCaptcha',
            payload: values.mobile,
          })
            .then(resolve)
            .catch(reject);
        }
      });
    });

  handleSubmit = () => {
    const { username, password } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'login/login',
      payload: {
        username,
        password,
      },
    });
  };
  onLightChange = value => {
    this.setState({
      username: value,
    });
  };
  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  render() {
    const { login, submitting } = this.props;
    const { usernames } = this.props.login;
    console.log('usernames: ,', usernames);
    console.log('usernames.length', usernames.length);
    const children = [];
    for (let i = 0; i < usernames.length; i++) {
      children.push(
        <Select.Option key={i.toString()} value={usernames[i]}>
          {usernames[i]}
        </Select.Option>
      );
    }
    const { type, autoLogin, username } = this.state;

    const gridStyle = {
      marginLeft: '35%',
      textAlign: 'center',
      marginBottom: '3%',
    };
    const gridStyle1 = {
      marginBottom: '3%',
      textAlign: 'center',
    };
    return (
      <>
        <div>
          <div style={{ marginTop: 50 }}>
            <Card.Grid style={gridStyle}>
              <p />
              <Row key={usernames ? username : '0'}>
                用户账号：
                <Select
                  onChange={this.onLightChange}
                  size="large"
                  style={{ width: 250, marginLeft: 20, marginBottom: 15 }}
                  defaultValue={username}
                >
                  {children}
                </Select>
              </Row>
              <p />
              <Row>
                登录密码：
                <Input
                  defaultValue={''}
                  type="password"
                  size="large"
                  onChange={e => this.setState({ password: e.target.value })}
                  style={{ marginLeft: 20, width: 250, marginBottom: 15 }}
                />
              </Row>
              <p />
              <Button
                onClick={this.handleSubmit}
                style={{ marginRight: 20 }}
                type="primary"
                size="large"
              >
                登录
              </Button>
            </Card.Grid>
          </div>
        </div>
      </>
    );
  }
}

export default LoginPage;
